import React, {
  FC,
  ReactNode,
  useRef,
  RefObject,
  useImperativeHandle,
  forwardRef,
  ForwardRefExoticComponent,
  Ref,
  CSSProperties,
} from 'react';
import styles from './style.less';
import Scrollbars from 'react-custom-scrollbars';

interface Iprops {
  width?: number | string;
  height: number | string;
  children: ReactNode;
  style?: CSSProperties;
  onScroll?: (e: any) => void;
}
interface Iref {
  ref?: Ref<any>;
}

const ScrollModel: ForwardRefExoticComponent<Iprops & Iref> = forwardRef(
  (props, cRef) => {
    const { width, height, children, style, onScroll } = props;

    const scrollRef = useRef() as RefObject<Scrollbars>;

    useImperativeHandle(cRef, () => ({
      scrollTo: (num: number) => {
        scrollRef.current?.scrollTop(num);
      },
    }));

    return (
      <Scrollbars
        onScroll={onScroll}
        ref={scrollRef}
        style={{ width: width || '100%', height, ...style }}
        renderThumbVertical={renderThumb}
      >
        {children}
      </Scrollbars>
    );
  },
);

export default ScrollModel;

const renderThumb: FC<{ style: any }> = ({ style, ...props }) => {
  const thumbStyle = {
    width: '3px',
    backgroundColor: '#7DE0FF',
    opacity: '0.3',
    borderRadius: '0px',
    right: '-1px',
  };
  return <div style={{ ...style, ...thumbStyle }} {...props} />;
};
